<template>
  <a-app>
    <Sender
      submitType="shiftEnter"
      :loading="loading"
      :value="value"
      @change="handleChange"
      @submit="handleSubmit"
      @cancel="handleCancel"
      :actions="renderActions"
    />
  </a-app>
</template>

<script setup name="BubbleSender">
import { ref, watch } from 'vue'
import { App, Space, Spin, Typography } from 'ant-design-vue'
import { Sender } from 'ant-design-x-vue'

const value = ref('')
const loading = ref(false)
const { message } = App.useApp()

// Mock send message
watch(loading, () => {
  if (loading.value) {
    const timer = setTimeout(() => {
      loading.value = false
      value.value = ''
      message.success('Send message successfully!')
    }, 2000)

    return () => {
      clearTimeout(timer)
    }
  }
})

const handleChange = (v) => {
  console.log('Sender onChange', v)
  value.value = v
}

const handleSubmit = () => {
  loading.value = true
}

const handleCancel = () => {
  loading.value = false
}

const renderActions = (_, info) => {
  const { SendButton, LoadingButton, ClearButton } = info.components

  return h(Space, { size: 'small' }, {
    default: () => [
      h(Typography.Text, { type: 'secondary' }, {
        default: () => h('small', null, '`Shift + Enter` to submit')
      }),
      h(ClearButton),
      loading.value
        ? h(LoadingButton, {
            type: 'default',
            icon: h(Spin, { size: 'small' }),
            disabled: true
          })
        : h(SendButton, {
            type: 'primary',
            disabled: false
          })
    ]
  })
}
</script>